<div class="pure-view-container">
  <div class="x-view-title">${t('ui.infrastructure.lov.title.lovManagement')}</div>
  <div class="x-search-bar">
    <form>
      <div class="form-row align-items-center">
        <div class="col-auto"><label class="sr-only" for="valueSetCode"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.infrastructure.lov.field.valueSetCode')}</div>
            </div><input type="text" class="form-control" id="valueSetCode" data-x-name="searchField.valueSetCode"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto"><label class="sr-only" for="valueSetName"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.infrastructure.lov.field.valueSetName')}</div>
            </div><input type="text" class="form-control" id="valueSetName" data-x-name="searchField.valueSetName"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto"><label class="sr-only" for="valueSetDesc"></label>
          <div class="input-group mb-2">
            <div class="input-group-prepend">
              <div class="input-group-text">${t('ui.infrastructure.lov.field.valueSetDesc')}</div>
            </div><input type="text" class="form-control" id="valueSetDesc" data-x-name="searchField.valueSetDesc"
              data-x-type="autoTrimText" />
          </div>
        </div>
        <div class="col-auto">
          <div class="form-check mb-2"><input class="form-check-input" type="checkbox" id="enableFlagOnly"
              data-x-name="searchField.enableFlagOnly" data-x-type="checkbox-boolean" /><label class="form-check-label"
              for="enableFlagOnly">${t('ui.infrastructure.lov.queryField.enableFlagOnly')}</label></div>
        </div>
        <div class="col-auto"><button type="button" class="btn btn-primary mb-2"
            data-x-ui="searchBtn">${t('ui.system.common.btn.search')}</button></div>
      </div>
    </form>
  </div>
  <div class="x-tool-bar"><button type="button" class="btn btn-outline-primary mb-2 btn-sm"
      data-x-ui="createBtn">${t('ui.system.common.btn.create')}</button></div>
  <table data-x-ui="lovTable" class="x-table-custom">
    <thead>
      <tr>
        <th data-field="id" data-visible="false">ID</th>
        <th data-field="valueSetCode">${t('ui.infrastructure.lov.field.valueSetCode')}</th>
        <th data-field="valueSetName">${t('ui.infrastructure.lov.field.valueSetName')}</th>
        <th data-field="valueSetDesc">${t('ui.infrastructure.lov.field.valueSetDesc')}</th>
        <th data-field="enableFlagDesc">${t('ui.system.common.field.enableFlag')}</th>
        <th>${t('ui.system.common.field.operate')}</th>
      </tr>
    </thead>
  </table>
  <div data-x-ui="newLovDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.infrastructure.lov.dialog.newLov')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group x-form-required"><label
                for="valueSetCode">${t('ui.infrastructure.lov.field.valueSetCode')}</label><input type="text"
                class="form-control" id="valueSetCode" name="valueSetCode" data-x-name="new.valueSetCode"
                placeholder="${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="valueSetName">${t('ui.infrastructure.lov.field.valueSetName')}</label><input type="text"
                class="form-control" id="valueSetName" name="valueSetName" data-x-name="new.valueSetName"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 100)}" /></div>
            <div class="form-group"><label
                for="valueSetDesc">${t('ui.infrastructure.lov.field.valueSetDesc')}</label><input type="text"
                class="form-control" id="valueSetDesc" name="valueSetDesc" data-x-name="new.valueSetDesc"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}" /></div>
            <div class="form-group"><label
                for="enableFlag">${t('ui.system.common.field.enableFlag')}</label><select class="form-control"
                id="enableFlag" name="enableFlag" data-x-name="new.enableFlag">
                <option value="true" selected="">${t('ui.system.common.option.enableFlag.true')}</option>
                <option value="false">${t('ui.system.common.option.enableFlag.false')}</option>
              </select></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <div data-x-ui="editLovDialog" class="modal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">${t('ui.infrastructure.lov.dialog.editLov')}</h5><button type="button"
            class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
          <form><input type="hidden" id="id" name="id" data-x-name="edit.id" /><input type="hidden" id="versionNumber"
              name="versionNumber" data-x-name="edit.versionNumber" />
            <div class="form-group x-form-required"><label
                for="valueSetCode">${t('ui.infrastructure.lov.field.valueSetCode')}</label><input type="text"
                class="form-control" id="valueSetCode" name="valueSetCode" data-x-name="edit.valueSetCode"
                placeholder="${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}" /></div>
            <div class="form-group x-form-required"><label
                for="valueSetName">${t('ui.infrastructure.lov.field.valueSetName')}</label><input type="text"
                class="form-control" id="valueSetName" name="valueSetName" data-x-name="edit.valueSetName"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 1, 100)}" /></div>
            <div class="form-group"><label
                for="valueSetDesc">${t('ui.infrastructure.lov.field.valueSetDesc')}</label><input type="text"
                class="form-control" id="valueSetDesc" name="valueSetDesc" data-x-name="edit.valueSetDesc"
                placeholder="${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}" /></div>
            <div class="form-group"><label
                for="enableFlag">${t('ui.system.common.field.enableFlag')}</label><select class="form-control"
                id="enableFlag" name="enableFlag" data-x-name="edit.enableFlag">
                <option value="true" selected="">${t('ui.system.common.option.enableFlag.true')}</option>
                <option value="false">${t('ui.system.common.option.enableFlag.false')}</option>
              </select></div>
          </form>
        </div>
        <div class="modal-footer"><button type="button" class="btn btn-secondary x-btn-cancel"
            data-dismiss="modal">${t('ui.system.common.btn.cancel')}</button><button type="button"
            class="btn btn-primary x-btn-confirm">${t('ui.system.common.btn.save')}</button></div>
      </div>
    </div>
  </div>
  <script src="${appJs('app/infrastructure/lov/lov-management.js')}" type="text/javascript"></script>
</div>